<!-- 
  模板部分：
  展示两个数据值：
  1. 通过toRef创建的message变量的值
  2. 响应式对象obj的message属性值
  当数据发生变化时，两处显示都会同步更新
-->
<template>
    <div>message的值：{{ message }}</div>
    <div>obj.message的值：{{ obj.message }}</div>
</template>

<!-- 
  脚本部分：
  演示Vue 3中toRef API的使用，展示如何从响应式对象中创建属性的引用
-->
<script setup>
// 从Vue中导入reactive和toRef函数
// reactive：用于创建响应式对象
// toRef：用于从响应式对象中获取某个属性的响应式引用
import { reactive, toRef } from 'vue'

// 使用reactive创建响应式对象obj
// 该对象包含message属性，初始值为一句劝学名言
const obj = reactive({
    message: '黑发不知勤学早，白首方悔读书迟'
})

// 使用toRef从响应式对象obj中获取message属性的引用
// toRef的特点：创建的引用与原对象属性保持同步，一方变化会影响另一方
// 参数1：源响应式对象；参数2：要引用的属性名
const message = toRef(obj, 'message')

// 设置定时器，2秒后修改message引用的值
setTimeout(() => {
    // 通过.value修改toRef创建的引用的值
    // 此时会同时更新原对象obj的message属性
    message.value = '少壮不努力，老大徒伤悲'
}, 2000); // 延迟时间：2000毫秒（2秒）
</script>